<!--<template>-->
<!--  <div-->
<!--      class="ValidCode disabled-select"-->
<!--      :style="`width:${width}; height:${height}`"-->
<!--      @click="refreshCode"-->
<!--  >-->
<!--    <span-->
<!--        v-for="(item, index) in codeList"-->
<!--        :key="index"-->
<!--        :style="getStyle(item)"-->
<!--    >{{ item.code }}</span>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'ValidCode',-->
<!--  model: {-->
<!--    prop: 'value',-->
<!--    event: 'input'-->
<!--  },-->
<!--  props: {-->
<!--    width: {-->
<!--      type: String,-->
<!--      default: '100px'-->
<!--    },-->
<!--    height: {-->
<!--      type: String,-->
<!--      default: '40px'-->
<!--    },-->
<!--    length: {-->
<!--      type: Number,-->
<!--      default: 4-->
<!--    },-->
<!--    refresh: {-->
<!--      type: Number-->
<!--    }-->
<!--  },-->
<!--  data () {-->
<!--    return {-->
<!--      codeList: []-->
<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    refresh () {-->
<!--      this.createdCode()-->
<!--    }-->
<!--  },-->
<!--  mounted () {-->
<!--    this.createdCode()-->
<!--  },-->
<!--  methods: {-->
<!--    refreshCode () {-->
<!--      this.createdCode()-->
<!--    },-->
<!--    createdCode () {-->
<!--      const len = this.length-->
<!--      const codeList = []-->
<!--      const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'-->
<!--      const charsLen = chars.length-->
<!--      // 生成-->
<!--      for (let i = 0; i < len; i++) {-->
<!--        const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]-->
<!--        codeList.push({-->
<!--          code: chars.charAt(Math.floor(Math.random() * charsLen)),-->
<!--          color: `rgb(${rgb})`,-->
<!--          fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,-->
<!--          padding: `${[Math.floor(Math.random() * 10)]}px`,-->
<!--          transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`-->
<!--        })-->
<!--      }-->
<!--      // 指向-->
<!--      this.codeList = codeList-->
<!--      // 将当前数据派发出去-->
<!--      // console.log(codeList.map(item => item.code).join(''))-->
<!--      this.$emit('input', codeList.map(item => item.code).join(''))-->
<!--    },-->
<!--    getStyle (data) {-->
<!--      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.ValidCode{-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  cursor: pointer;-->
<!--}-->
<!--.ValidCode span{-->
<!--  display: inline-block;-->
<!--}-->
<!--</style>-->
